<template>
    <!-- 底部组件容器，包含任务统计和筛选功能 -->
    <div class="footer">
        <!-- 未完成任务数量统计 -->
        <span class="todo-count">
            共<strong>{{ lastLength }}</strong>条未完成任务和
        </span>

        <!-- 任务筛选列表（全部/未完成/已完成） -->
        <ul class="filters">
            <li>
                <!--
                    全部任务筛选按钮：
                    - @click.prevent：点击时触发事件，.prevent 阻止默认跳转（因href="#/"）
                    - emit('updateStatus', 'all')：向父组件传递筛选状态 'all'
                    - :class="{ selected: status === 'all' }"：当前状态为'all'时添加选中样式
                    - href="#/"：模拟锚点跳转，仅作样式兼容
                -->
                <a
                    @click.prevent="emit('updateStatus', 'all')"
                    :class="{ selected: status === 'all' }"
                    href="#/"
                >
                    All
                </a>
            </li>
            <li>
                <!-- 未完成任务筛选按钮（逻辑同上） -->
                <a
                    @click.prevent="emit('updateStatus', 'active')"
                    :class="{ selected: status === 'active' }"
                    href="#/active"
                >
                    Active
                </a>
            </li>
            <li>
                <!-- 已完成任务筛选按钮（逻辑同上） -->
                <a
                    @click.prevent="emit('updateStatus', 'completed')"
                    :class="{ selected: status === 'completed' }"
                    href="#/completed"
                >
                    Completed
                </a>
            </li>
        </ul>
    </div>
</template>

<script setup>
// 定义组件接收的props：
// - lastLength：未完成任务的数量（从父组件传递）
// - status：当前筛选状态（'all'/'active'/'completed'，从父组件传递）
const props = defineProps(['lastLength', 'status'])

// 定义自定义事件发射器，声明可触发updateStatus事件
// 用于向父组件传递新的筛选状态
const emit = defineEmits(["updateStatus"]);
</script>

<style scoped>
/* 底部组件容器样式 */
.footer {
    padding: 10px 15px; /* 内边距 */
    height: 20px; /* 固定高度 */
    text-align: center; /* 内容居中 */
    font-size: 15px; /* 字体大小 */
    border-top: 1px solid #e6e6e6; /* 顶部边框，分隔主体和底部 */
    position: relative; /* 相对定位，为伪元素提供参考 */
}

/* 底部阴影效果（通过伪元素实现层次感） */
.footer:before {
    content: ""; /* 伪元素必须设置content */
    position: absolute; /* 绝对定位，覆盖整个宽度 */
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px; /* 阴影高度 */
    overflow: hidden; /* 隐藏超出部分 */
    /* 多层阴影，模拟立体效果 */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
    0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2),
    0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

/* 任务统计文本样式 */
.todo-count {
    float: left; /* 左浮动，与筛选列表分列 */
    text-align: left; /* 文本左对齐 */
    color: #777; /* 灰色文字，次要信息 */
}

/* 统计数字样式 */
.todo-count strong {
    font-weight: 300; /* 轻量级字体，避免过于突出 */
    margin: 0 2px; /* 左右间距 */
}

/* 筛选列表样式 */
.filters {
    float: right; /* 右浮动，与统计文本分列 */
    margin: 0;
    padding: 0;
    list-style: none; /* 去除默认列表样式 */
}

/* 筛选列表项样式 */
.filters li {
    display: inline; /* 横向排列 */
}

/* 筛选按钮样式 */
.filters li a {
    color: inherit; /* 继承父元素颜色 */
    margin: 3px; /* 按钮间距 */
    padding: 3px 7px; /* 内边距，扩大点击区域 */
    text-decoration: none; /* 去除下划线 */
    border: 1px solid transparent; /* 透明边框，hover时显示 */
    border-radius: 3px; /* 圆角边框 */
    border-color: #767676; /* 边框颜色 */
}

/* 筛选按钮hover状态 */
.filters li a:hover {
    border-color: #db7676; /* 边框变红，提示交互 */
}

/* 筛选按钮选中状态（当前激活的筛选条件） */
.selected {
    border-color: #db7676; /* 边框变红，明确当前选中状态 */
}
</style>